<template>
  <div class="web-package-detail w-nav-height w-content-box">
    <br>
    <h2
      :class="{ 'w-hover-text w-pointer': packageModel.url }"
      class="title w-text-center"
      @click="linkClick"
    >
      {{ packageModel.name }}
    </h2>
    <p class="date w-text-center">
      {{ packageModel.date | DateFormat }}
    </p>
    <p class="description w-text-center">
      {{ packageModel.describe }}
    </p>
    <w-marked-parsing :datastr="packageModel.content" />
    <w-comments :api="commentsApi" :comments-list="packageModel.commentsList" @reload="reload"/>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import WMarkedParsing from '@/components/global/marked/custom/parsing'
import Package from '@/models/package'
import WComments from '@/components/global/comments'

@Component({
  layout: 'web',
  name: 'WebPackageDetail',
  components: {
    WMarkedParsing,
    WComments
  },
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/web/package')
  },
  async asyncData ({ app, route }) {
    const { $wAxios } = app
    const detail = await $wAxios.$get(`${Api.package.detail}${route.params.id}`)
    return { packageModel: detail }
  },
  head () {
    return {
      title: (this as WebPackageDetail).packageModel!.name
    }
  }
})
export default class WebPackageDetail extends Vue {
  packageModel: Package | null = null
  commentsApi = Api.package.comments

  /**
   * 跳转链接
   */
  linkClick () {
    if (this.packageModel!.url) {
      window.open(this.packageModel!.url)
    }
  }

  reload () {
    this.$wAxios.$get(`${Api.package.detail}${this.$route.params.id}`).then((model) => {
      this.packageModel = model
    })
  }
}
</script>

<style scoped lang="less">
.web-package-detail {
  > .date {
    color: #999;
  }
  > .description {
    color: #666;
    font-size: 16px;
    margin: 10px 0;
    line-height: 24px;
  }
}
</style>
